import { graphic } from "echarts/core";

export const trafficOptions = (params: Record<string, any>) => ({
  title: {
    show: false
  },
  legend: {
    show: true,
    top: "5%",
    color: "#c0c9d2"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(0, 255, 233,0)"
            },
            {
              offset: 0.5,
              color: "rgba(255, 255, 255,1)"
            },
            {
              offset: 1,
              color: "rgba(0, 255, 233,0)"
            }
          ],
          global: false
        }
      }
    }
  },
  grid: {
    top: "15%",
    left: "10%",
    right: "5%",
    bottom: "10%"
  },
  xAxis: {
    type: "category",
    axisLine: {
      show: true
    },
    splitArea: {
      color: "#f00",
      lineStyle: {
        color: "#f00"
      }
    },
    axisLabel: {
      color: "#BCDCF0"
    },
    splitLine: {
      show: false
    },
    boundaryGap: false,
    data: params?.timeList ?? []
  },
  yAxis: {
    type: "value",
    min: 0,
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,0.1)"
      }
    },
    axisLine: {
      show: true
    },
    axisLabel: {
      show: true,
      margin: 10,
      color: "#d1e6eb"
    },
    axisTick: {
      show: false
    }
  },
  series: [
    {
      name: "出口流量",
      type: "line",
      smooth: true,
      lineStyle: {
        color: "#00b3f4",
        shadowColor: "rgba(0, 0, 0, .3)",
        shadowBlur: 0,
        shadowOffsetY: 5,
        shadowOffsetX: 5
      },
      label: {
        show: false,
        position: "top",
        color: "#00b3f4"
      },
      // 去除点标记
      symbolSize: 0,
      // 鼠标放上去还是要有颜色的
      itemStyle: {
        color: "#00b3f4"
      },
      // 设置渐变色
      areaStyle: {
        color: new graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(0,179,244,0.3)"
            },
            {
              offset: 1,
              color: "rgba(0,179,244,0)"
            }
          ],
          false
        ),
        shadowColor: "rgba(0,179,244, 0.9)",
        shadowBlur: 20
      },
      data: params?.outData ?? []
    },
    {
      name: "入口流量",
      type: "line",
      smooth: true,
      // 阴影
      lineStyle: {
        color: "#00ca95",
        shadowColor: "rgba(0, 0, 0, .3)",
        shadowBlur: 0,
        shadowOffsetY: 5,
        shadowOffsetX: 5
      },
      label: {
        show: false,
        position: "top",
        color: "#00ca95"
      },
      // 去除点标记
      symbolSize: 0,
      itemStyle: {
        color: "#00ca95"
      },
      // 设置渐变色
      areaStyle: {
        color: new graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(0,202,149,0.3)"
            },
            {
              offset: 1,
              color: "rgba(0,202,149,0)"
            }
          ],
          false
        ),
        shadowColor: "rgba(0,202,149, 0.9)",
        shadowBlur: 20
      },
      data: params?.inData ?? []
    }
  ]
});
